.search {
  display: flex;
  /* 固定定位跟父级没有关系, 以屏幕大小为准 */
  position: fixed;
  top: 0;
  /* 有固定定位的盒子 margin auto 失效; 应以下方式居中*/
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 1;
  /* 固定盒子必须有宽度 */
  width: 100%;
  max-width: 1080px;
  min-width: 320px;
  height: 44px;
  background-image: linear-gradient(0deg, #c8dce9, #80919d 50%);
}

.search-box {
  flex: 1;
}

.search-b-content {
  position: relative;
  height: 28px;
  background-color: #fff;
  border: 1px solid #fff;
  margin: 8px 10px;
  border-radius: 14px;
  /* 注意css3盒子模型的行高问题, 会使文字垂直居中变下, 需要调整 */
  line-height: 26px;
}

.search-b-content::before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0;
  width: 35px;
  height: 100%;
  background: url(../img/home-common-sprite2x@v7.15.png) 15px 7px no-repeat;
  background-size: 21px;
}

.search-b-content span {
  margin-left: 40px;
  font-size: 12px;
  color: #666;
}

.search-mine {
  width: 44px;
  height: 44px;
  text-align: center;
}

.search-mine::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  margin: 3px auto 0;
  background: url(../img/home-common-sprite2x@v7.15.png) 1px -36px no-repeat;
  background-size: 21px;
}

.search-mine span {
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

.banner {
  z-index: -1;
}

.banner img {
  width: 100%;
}

.nav-local {
  position: relative;
  z-index: 1;
  height: 64px;
  border-radius: 8px;
  margin: -55px 12px 10px;
  padding: 4px 0 8px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

.nav-local ul {
  display: flex;
}

.nav-local ul li {
  flex: 1;
}

.nav-local ul li a {
  display: flex;
  /* 主轴设置为Y轴 */
  flex-direction: column;
  /* 侧轴居中对齐 */
  align-items: center;
  line-height: 1.2;
}

/* 属性选择器 */
.nav-local ul li [class^="nav-l-"] {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-image: url(../img/home-fivemain-sprite2x@v7.15.png);
  background-repeat: no-repeat;
  background-size: 40px;
}

.nav-l-gljd {
  background-position: 0 0;
}

.nav-l-mphd {
  background-position: 0 -40px;
}

.nav-l-msl {
  background-position: 0 -80px;
}

.nav-l-zby {
  background-position: 0 -120px;
}

.nav-l-yry {
  background-position: 0 -160px;
}

.nav-main {
  border-radius: 8px;
  margin: 0 12px 1px;
  /* 切去内部子元素小圆角 */
  overflow: hidden;
}

.nav-m-common {
  display: flex;
  height: 66px;
  background-color: #80919d;
}

.nav-m-common:nth-child(2) {
  margin: 1px 0;
}

.nav-m-items:nth-child(1) {
  flex: 0 1 31%;
}

.nav-m-items:nth-child(2) {
  flex: 0 1 23%;
}

.nav-m-items:nth-child(3) {
  flex: 0 1 23%;
}

.nav-m-items:nth-child(-n+3) {
  border-right: 1px solid #f2f2f2;
}

/* 同时出现两个类便执行 */
.nav-m-items.nav-m-special {
  flex: 0 1 45%;
  border-right: 0;
}

.nav-m-items.nav-m-last {
  width: 22%;
}

.nav-m-items {
  text-align: center;
  line-height: 66px;
}

.nav-m-items span {
  font-size: 14px;
  color: #fff;
}

.nav-m-items.nav-m-special span {
  color: #a05416;
}

.nav-m-items:nth-child(1) span{
  margin-left: -60%;
}

.nav-m-items.nav-m-hotel {
  background: url(../img/grid-nav-items-hotel@v7.15.png) no-repeat;
  background-size: 73px;
  background-position: right bottom;
}

.nav-m-items.nav-m-mskz {
  background: url(../img/grid-nav-items-minsu@v7.15.png) no-repeat;
  background-size: 37px;
  background-position: left bottom;
}

.nav-m-items.nav-m-flight {
  background: url(../img/grid-nav-items-flight@v7.15.png) no-repeat;
  background-size: 79px;
  background-position: right bottom;
}

.nav-m-items.nav-m-train {
  background: url(../img/grid-nav-items-train.png) no-repeat;
  background-size: 37px;
  background-position: left bottom;
}

.nav-m-items.nav-m-travel {
  background: url(../img/grid-nav-items-travel@v7.15.png) no-repeat;
  background-size: 94px;
  background-position: right bottom;
}

.nav-m-items.nav-m-sjt {
  background: url(../img/grid-nav-items-dingzhi@v7.15.png) no-repeat;
  background-size: 61px;
  background-position: left bottom;

}
.nav-m-items.nav-m-special {
  background: url(../img/grid-nav-items-hot.png) no-repeat;
  background-size: 100%;
  background-position: right bottom;
}

.nav-m-common:nth-child(1) {
  background: linear-gradient(to right, #fa5956, #fb8650 54%);
}

.nav-m-common:nth-child(2) {
  background: linear-gradient(to right, #4b8fed, #53bced);
}

.nav-m-common:nth-child(3) {
  background: linear-gradient(to right, #34c2aa,#6cd557);
}

.nav-kinds {
  margin: 0 12px 12px;
}

.nav-kinds ul {
  display: flex;
  flex-wrap: wrap;
}

.nav-kinds ul li {
  /* 相对于父级宽度 */
  flex: 20%;
}

.nav-kinds ul li a {
  display: flex;
  /* 主轴设置为Y轴 */
  flex-direction: column;
  /* 侧轴居中对齐 */
  align-items: center;
  line-height: 1.2;
}

.nav-kinds ul li [class^="nav-k-"] {
  display: block;
  width: 28px;
  height: 28px;
  background-image: url(../img/un_ico_subnav2x@v7.33.png);
  background-repeat: no-repeat;
  background-size: 28px;
  margin-top: .63rem;
  margin-bottom: .31rem;
}

.nav-k-ziyou {
  background-position: 0 0;
}

.nav-k-wifi {
  background-position: 0 -28px;
}

.nav-k-safe {
  background-position: 0 -56px;
}

.nav-k-buy {
  background-position: 0 -84px;
}

.nav-k-car {
  background-position: 0 -112px;
}

.nav-k-flight {
  background-position: 0 -140px;
}

.nav-k-gift {
  background-position: 0 -168px;
}

.nav-k-loan {
  background-position: 0 -196px;
}

.nav-k-community {
  background-position: 0 -224px;
}

.nav-k-more {
  background-position: 0 -252px;
}


